<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>场地信息修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 300px;" align="right">
          <span>场地编号：</span>
        </td>
        <td style="width: 600px;">
          <el-input v-model="tableData.id" disabled></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>场地名称：</span>
        </td>
        <td>
          <el-input v-model="tableData.name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>场地英文名称：</span>
        </td>
        <td>
          <el-input v-model="tableData.english_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>类型：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openFieldTypeList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.fieldType.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>校区：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openCampusList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.campus.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>功能区：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openAreaList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.area.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>场地联系人电话：</span>
        </td>
        <td>
          <el-input v-model="tableData.telephone"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>场地描述：</span>
        </td>
        <td>
          <el-input v-model="tableData.discription"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>负责人：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openTeacherList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.teacher.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">取消</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
    <!-- 校区筛选 -->
    <el-dialog title="选择校区" :visible.sync="openCampusList">
      <el-input placeholder="请输入关键字" v-model="campusKeyword">
        <template slot="prepend">校区名</template>
        <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="campusSelect">
        <el-radio
          v-for="(campus, index) in campusList"
          :key="'campus' + index"
          :label="campus"
        >{{ campus.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="campusSelect = '',campusInit()">清 空</el-button>
        <el-button type="primary" @click="campusSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 功能区筛选 -->
    <el-dialog title="选择功能区" :visible.sync="openAreaList">
      <el-input placeholder="请输入关键字" v-model="areaKeyword">
        <template slot="prepend">功能区名</template>
        <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="areaSelect">
        <el-radio
          v-for="(area, index) in areaList"
          :key="'area' + index"
          :label="area"
        >{{ area.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="areaSelect = '',areaInit()">清 空</el-button>
        <el-button type="primary" @click="areaSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 场地类型筛选 -->
    <el-dialog title="选择场地类型" :visible.sync="openFieldTypeList">
      <el-input placeholder="请输入关键字" v-model="fieldTypeKeyword">
        <template slot="prepend">场地类型名</template>
        <el-button slot="append" icon="el-icon-search" @click="getfieldTypeByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="fieldTypeSelect">
        <el-radio
          v-for="(fieldType, index) in fieldTypeList"
          :key="'fieldType' + index"
          :label="fieldType"
        >{{ fieldType.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fieldTypeSelect = '',fieldTypeInit()">清 空</el-button>
        <el-button type="primary" @click="fieldTypeSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 负责人筛选 -->
    <el-dialog title="选择教师" :visible.sync="openTeacherList">
      <el-input placeholder="请输入关键字" v-model="teacherKeyword">
        <template slot="prepend">教师名</template>
        <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="teacherSelect">
        <el-radio
          v-for="(teacher, index) in teacherList"
          :key="'teacher' + index"
          :label="teacher"
        >{{ teacher.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherSelect = '',teacherInit()">清 空</el-button>
        <el-button type="primary" @click="teacherSelected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "update",
  props: {
    fieldDetails: {
      type: Object, //组件传过来的场地详情
    },
  },
  data() {
    return {
      teacherList: [], //教师列表
      teacherSelect: "", //教师选择
      openTeacherList: false, //教师筛选框是否开启
      teacherKeyword: "", //教师筛选关键字

      openCampusList: false, //校区筛选显示
      campusKeyword: "", //校区搜索关键词
      campusSelect: "", //校区选择
      campusList: [], //校区列表

      openAreaList: false, //功能区筛选显示
      areaKeyword: "", //功能区搜索关键词
      areaSelect: "", //功能区选择
      areaList: [], //功能区列表

      openFieldTypeList: false, //场地类型筛选显示
      fieldTypeKeyword: "", //场地类型关键词
      fieldTypeSelect: "", //场地类型选择
      fieldTypeList: [], //场地类型列表

      //表格数据
      tableData: {
        id: "",
        name: "",
        english_name: "",
        telephone: "",
        discription: "",
        campus: "",
        area: "",
        fieldType: "",
        teacher: "",
      },
    };
  },
  created() {
    //初始值
    this.init();
    //获取教师列表
    this.getTeacherList();
    //获取校区列表
    this.getCampusList();
    //获取功能区列表
    this.getAreaList();
    //获取场地类型列表
    this.getFieldTypeList();
  },
  methods: {
    //初始值
    init() {
      this.tableData.id = this.fieldDetails.id;
      this.tableData.name = this.fieldDetails.name;
      this.tableData.english_name = this.fieldDetails.english_name;
      this.tableData.telephone = this.fieldDetails.telephone;
      this.tableData.discription = this.fieldDetails.discription;
      this.areaInit();
      this.campusInit();
      this.fieldTypeInit();
      this.teacherInit();
    },
    areaInit() {
      let id;
      let name;
      this.tableData.area = {
        id: this.fieldDetails.area.id,
        name: this.fieldDetails.area.name,
      };
    },
    campusInit() {
      let id;
      let name;
      this.tableData.campus = {
        id: this.fieldDetails.campus.id,
        name: this.fieldDetails.campus.name,
      };
    },
    fieldTypeInit() {
      let id;
      let name;
      this.tableData.fieldType = {
        id: this.fieldDetails.fieldType.id,
        name: this.fieldDetails.fieldType.name,
      };
    },
    teacherInit() {
      let id;
      let name;
      this.tableData.teacher = {
        id: this.fieldDetails.by_who.id,
        name: this.fieldDetails.by_who.name,
      };
    },

    //确定校区选择
    campusSelected() {
      if (this.campusSelect != "") {
        this.tableData.campus = this.campusSelect;
      }
      this.openCampusList = false;
    },

    //确定功能区选择
    areaSelected() {
      if (this.areaSelect != "") {
        this.tableData.area = this.areaSelect;
      }
      this.openAreaList = false;
    },

    //确定场地类型选择
    fieldTypeSelected() {
      if (this.fieldTypeSelect != "") {
        this.tableData.fieldType = this.fieldTypeSelect;
      }
      this.openFieldTypeList = false;
    },

    //确定负责人选择
    teacherSelected() {
      if (this.teacherSelect != "") {
        this.tableData.teacher = this.teacherSelect;
      }
      this.openTeacherList = false;
    },

    //根据关键词搜索校区
    getCampusByKeyword() {},

    //根据关键词搜索功能区
    getAreaByKeyword() {},

    //根据关键词搜索场地类型
    getFieldByKeyword() {},

    //根据关键词搜索负责人
    getTeacherByKeyword() {},

    //根据关键词搜索场地类型
    getfieldTypeByKeyword() {},

    /**=============数据列表================================= */
    //获取教师列表
    getTeacherList() {
      this.teacherList = [
        { id: "01", name: "张三" },
        { id: "02", name: "李四" },
        { id: "03", name: "王五" },
      ];
    },

    //获取校区列表
    getCampusList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取功能区列表
    getAreaList() {
      this.areaList = [
        { id: "1", name: "第一教学楼" },
        { id: "2", name: "第二教学楼" },
        { id: "3", name: "第三教学楼" },
        { id: "4", name: "美术大楼" },
        { id: "5", name: "中巴科技园" },
      ];
    },

    //获取场地类型列表
    getFieldTypeList() {
      this.fieldTypeList = [
        {
          id: "01",
          name: "教学楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
        {
          id: "02",
          name: "实验楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
        {
          id: "03",
          name: "美术楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
      ];
    },

    //返回
    back() {
      this.$emit("closeUpdate", false);
    },

    //取消
    reset() {
      this.init();
    },

    //修改场地信息
    update() {
      this.$alert("修改场地信息", "修改成功", {
        confirmButtonText: "确定",
        callback: (action) => {
          //打印修改后的数据
          console.log(this.fieldDetails);
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        },
      });
    },
  },
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
